<template>
  <div class="concise-right vip-right" v-if="packageType === 'vip'">
    <div class="concise-top">
      <div class="title">
        <svg-icon iconClass="vip3" />
        <span>翻译VIP特权</span>
      </div>
      <div class="text-center">
        <span class="subtitle">畅享极速翻译引擎</span>
      </div>
      <div class="line" />
    </div>
    <div class="list">
      <ul>
        <li v-for="(it, i) in list" :key="i">
          <img :src="it.icon" alt="">
          <b :title="it.fun">{{ it.fun }}</b>
          <p :title="it.vip">{{ it.vip }}</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="concise-right tsb-right" v-else>
    <div class="concise-top">
      <div class="title">
        <svg-icon iconClass="vip3" />
        <span>翻译币特权</span>
      </div>
      <div class="text-center">
        <span class="subtitle">解锁专业翻译引擎</span>
      </div>
      <div class="line" />
    </div>
    <div class="list">
      <ul>
        <li v-for="(it, i) in tsbList" :key="i" class="item">
          <div class="item-title">
            <img :src="it.icon" alt="">
            <b>{{ it.title }}</b>
          </div>
          <p class="item-msg" v-if="it.msg">{{ it.msg }}</p>
          <ul class="item-list" v-if="it.list && it.list.length">
            <li v-for="text in it.list">{{ text }}</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { requestConfig } from "@/utils/costum-config";
import { defineProps, ref, computed, onMounted, watch } from "vue";

const props = defineProps({
  packageType: String
});
const packageType = computed(() => props.packageType )
const list = ref<any[]>([]);
const tsbList = ref<any[]>([]);
const loadedMap: any = {}
function getRight() {
  const configName = "fyqyb";
  
  if(loadedMap[configName]){
    return
  }
  loadedMap[configName] = true
  
  requestConfig(configName, { isCache: false }).then((res: any) => {
    const { list: list_ } = res?.params || {};
    if (Array.isArray(list_)) {
      list.value = list_;
    }
  });
}
function getTsbRight(){
  const configName = "fybqysm";

  if(loadedMap[configName]){
    return
  }
  loadedMap[configName] = true

  requestConfig(configName, { isCache: false }).then((res: any) => {
    if (Array.isArray(res?.params)) {
      tsbList.value = res.params;
    }
  });
}
watch(packageType, val => {
  if(val === 'vip'){
    getRight()
  }else{
    getTsbRight()
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
$--text-color: #7b4801;
.concise-right{
  background: linear-gradient(180deg, #fff8ea 0%, #ffe6b5 100%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 25px 5px 5px;
  color: $--text-color;
  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 304px;
    background: url(~@/assets/images/pay-rights-bg.png) 100% 100% / contain
      no-repeat;
    border-radius: 10px;
    pointer-events: none;
  }
}
.concise-top{
  padding: 0 20px;
}
.title{
  flex-grow: 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  .svg-icon {
    font-size: 20px;
    margin-right: 6px;
  }
}
.subtitle {
  display: inline-block;
  font-size: 12px;
  margin-top: 5px;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 1px;
  }
  &::before {
    left: -5px;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(123, 72, 1, 0) 0%, $--text-color 100%);
  }
  &::after {
    right: -5px;
    transform: translateX(100%);
    background: linear-gradient(90deg, $--text-color 0%, rgba(123, 72, 1, 0) 100%);
  }
}
.line {
  height: 1px;
  background: rgba(123, 72, 1, 0.1);
  margin: 20px 0;
}
.list {
  flex: 1;
  padding: 0 20px 20px;
  overflow: auto;
  place-self: center;
  &::-webkit-scrollbar {
    &-thumb {
      background: rgb(123, 72, 1, .3);
    }
  }
}

.vip-right{
  ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 20px;
    grid-column-gap: 10px;
  }
  li{
    text-align: center;
    overflow: hidden;
    img{
      display: block;
      width: 24px;
      height: 24px;
      margin: 0 auto;
    }
    b{
      display: block;
      font-weight: bold;
      margin: 10px 4px 2px;
    }
    p{
      opacity: .7;
    }
    b,
    p{
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.tsb-right{
  width: 100%;
  .item{
    + .item{
      margin-top: 20px;
    }
  }
  .item-title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    img{
      flex: 0 0 24px;
      width: 24px;
    }
    b{
      font-weight: bold;
      font-size: 16px;
    }
  }
  .item-msg{
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: rgb($--text-color, .7);

    + .item-list{
      margin-top: 10px;
    }
  }
  .item-list li{
    font-size: 12px;
    color: rgb($--text-color, .7);
    padding-left: 14px;
    position: relative;
    line-height: 16px;
    + li{
      margin-top: 10px;
    }
    &::after{
      content: "";
      position: absolute;
      left: 0;
      // top: 50%;
      // margin-top: -2px;
      top: 6px;
      width: 4px;
      height: 4px;
      background: $--text-color;
      border-radius: 50%;
    }
  }
}
</style>
